<template>
    <div class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <div class="title">约见题目</div>
      <div class="textss_0315"><label class="label">标题</label><input placeholder="预设内容" type="text"></div>
      <div class="title">想知道些什么</div>
      <div class="textarea"><textarea placeholder="内容描述"></textarea></div>
      <div class="title">图片添加</div>
      <div class="imgs">
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314"></span>
        <span class="spanItem2_0314 addImg"></span>
      </div>
      <div class="title colorDeeps_0315">希望哪个领域的行家为你解答？</div>
      <div class="labels">
        <span class="label">XML</span>
        <span class="label">XHTML</span>
        <span class="label">诺基亚</span>
        <span class="addLabel">添加标签+</span>
      </div>
      <div class="textss_0315"><label class="label">预约金额</label><input placeholder="金额输入" type="number"></div>
      <div class="sendWrap">
        <router-link to="payment"><button class="send">发布</button></router-link>
      </div>
    </div>
</template>
<script>
import myHeader from './base/myHeader';
export default {
  data () {
    return {
      myObj: {
        type: 3,
        text: "求约"
      }
    }
  },
  methods: {
    events(i){
      if(i == 2){
         history.back();
      }

    }
  },
  components: {
    myHeader,
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    .sendWrap {
      padding: .56rem 0 .21rem;;
      .send {
        display: block;
        width: 3.35rem;
        height: .47rem;
        line-height: .47rem;
        text-align: center;
        background: #557AFF;
        font-size: .18rem;
        color: white;
        border-radius: .05rem;
        border: none;
        margin: 0 auto;
      }
    }
    .title {
      height: .44rem;
      line-height: .44rem;
      color: #888;
      font-size: .14rem;
      padding-left: .16rem;
    }
    .colorDeeps_0315 {
      color: #353535;
      font-weight: 500;
    }
    .textss_0315 {
      height: .44rem;
      padding: 0 .15rem;
      background: white;
      display: flex;
      align-items: center;
      .label {
        width: .9rem;
        font-size: .17rem;
        color: #000;
        font-weight: bold;
      }
      input {
        display: flex;
        flex: 1;
        color: #B2B2B2;
        font-size: .17rem;
        border: none;
      }
    }
    .textarea {
      width: 100%;
      padding: .11rem .15rem;
      background: white;
      box-sizing: border-box;
      textarea{
        width: 100%;
        min-height: .53rem;
        font-size: .17rem;
        color: #B2B2B2;
        font-family: "Microsoft YaHei";
      }
    }
    .imgs {
      padding: .15rem;
      background: white;
      overflow: hidden;
      .spanItem2_0314 {
        display: block;
        float: left;
        width: .57rem;
        height: .57rem;
        background: #ccc;
        margin: 0 .13rem .13rem 0;
        &:nth-of-type(5n) {
          margin-right: 0;
        }

      }
      .addImg{
        background: url("../assets/img/expert/icon_ba@3x.png");
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
    .labels {
      overflow: hidden;
      padding: 0 .2rem 0;
      span {
        display: block;
        float: left;
        text-align: center;
        padding: .07rem .1rem;
        margin: 0 .14rem .14rem 0;
        border: .04rem;
        border-radius: .04rem;
        font-size: .14rem;
        &.addLabel{
          background: #39393D;
          color: white;
        }
        &.label{
          background: #39393D;
          color: white;
        }
      }
      
    }
  }
</style>
